<%--@elvariable id="webRoot" type="com.doupi.partner.op.interceptor.OpFilter"--%>
<%@ page language="java" pageEncoding="UTF-8" %>
<%@ include file="../../common/tags.jsp" %>

<!DOCTYPE html>
<html>
<head lang="en">
    <%@include file="../../common/assets.jsp" %>
    <link type="text/css" rel="stylesheet" href="${webRoot }/assets/ui/amazeui/tree/amazeui.tree.min.css">
</head>
<body>
<!-- header -->
<%@include file="../../common/header.jsp" %>

<!-- main start -->
<div class="am-cf admin-main">
    <!-- sidebar start -->
    <%@include file="../../common/menu.jsp" %>
    <!-- sidebar end -->

    <!-- main start -->
    <div class="admin-content">
        <div class="admin-content-body">
            <div class="am-cf am-padding am-padding-bottom-0">
                <div class="am-fl am-cf">
                    <strong class="am-text-primary am-text-lg">系统配置</strong> /
                    <small>角色编辑</small>
                </div>
            </div>

            <hr>
            <form action="${webRoot}/configure/administratorRole/save" method="POST" id="administratorRole-edit-form">
                <c:forEach items="${administratorRoleHasPermissions }" var="item" varStatus="st">
                    <input type="hidden" class="am-input-sm" name="administratorRoleHasPermissions[${st.index }].administratorPermissionId" value="${item.administratorPermissionId}">
                </c:forEach>
                <input type="hidden" class="am-input-sm" name="id" value="${administratorRole.id}">

                <div class="am-tabs am-margin" data-am-tabs="">
                    <ul class="am-tabs-nav am-nav am-nav-tabs">
                        <li class="am-active">
                            <a href="#tab-base-info">基本信息</a>
                        </li>
                    </ul>


                    <div class="am-tabs-bd" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">

                        <%--基本信息--%>
                        <div class="am-tab-panel am-in am-active am-form" id="tab-base-info">

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">名称</div>
                                <div class="am-u-sm-8 am-u-md-10">
                                    <input type="text" class="am-input-sm" name="name" value="${administratorRole.name}">
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">CODE</div>
                                <div class="am-u-sm-8 am-u-md-10">
                                    <input type="text" class="am-input-sm" name="code" value="${administratorRole.code}">
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">状态</div>
                                <div class="am-u-sm-8 am-u-md-10">
                                    <select name="status" class="am-input-sm">
                                        <option value="1"
                                                <c:if test="${administratorRole.status == 1}">selected</c:if>>可用
                                        </option>
                                        <option value="0"
                                                <c:if test="${administratorRole.status == 0}">selected</c:if>>不可用
                                        </option>
                                    </select>
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">权限</div>
                                <div class="am-u-sm-8 am-u-md-10">
                                    <ul class="am-tree am-tree-folder-select" role="tree" id="parentTree">
                                        <li class="am-tree-branch am-hide" data-template="treebranch" role="treeitem" aria-expanded="false">
                                            <div class="am-tree-branch-header">
                                                <button type="button" class="am-tree-icon am-tree-icon-caret am-icon-caret-right">
                                                    <span class="am-sr-only">Open</span>
                                                </button>
                                                <button type="button" class="am-tree-branch-name">
                                                    <span class="am-tree-icon am-tree-icon-folder"></span>
                                                    <span class="am-tree-label"></span>
                                                </button>
                                            </div>
                                            <ul class="am-tree-branch-children" role="group"></ul>
                                            <div class="am-tree-loader" role="alert">Loading...</div>
                                        </li>
                                        <li class="am-tree-item am-hide" data-template="treeitem" role="treeitem">
                                            <button type="button" class="am-tree-item-name">
                                                <span class="am-tree-icon am-tree-icon-item"></span>
                                                <span class="am-tree-label"></span>
                                            </button>
                                        </li>
                                    </ul>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="am-margin">
                    <button type="submit" class="am-btn am-btn-primary am-btn-xs">保存</button>
                    <button type="button" class="am-btn am-btn-primary am-btn-xs" onclick="history.go(-1)">关闭</button>
                </div>
            </form>
        </div>

    </div>

    <!-- main end -->

    <%@include file="../../common/footer.jsp" %>

    <script src="${webRoot}/assets/ui/amazeui/tree/amazeui.tree.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $('#parentTree').tree({
                dataSource: function (options, callback) {
                    if (options != undefined) {
                        ajaxRequest({
                            url: '${webRoot}/configure/administratorPermission/list/' + ((options.attr && options.attr.code) || '-1'),
                            method: 'GET',
                            async: false
                        }, function (data) {
                            if (data.statusCode == '0000') {
                                var dataSources = [];

                                $.each(data.data, function (key, value) {
                                    dataSources.push({
                                        title: value.name,
                                        type: value.type == 2 ? 'item' : 'folder',
                                        attr: {
                                            id: 'administratorPermission' + value.id,
                                            code: value.id
                                        }
                                    });
                                });

                                if (dataSources.length == 0 && (!options.attr || !options.attr.code)) {
                                    dataSources.push({
                                        title: 'ROOT根权',
                                        type: 'folder',
                                        attr: {
                                            id: 'administratorPermission0',
                                            code: '0'
                                        }
                                    });
                                }

                                callback({
                                    data: dataSources
                                });
                            }
                        }, function () {
                        }, true);
                    }
                },
                multiSelect: true,
                cacheItems: true,
                folderSelect: true
            }).on('selected.tree.amui', function (event, selected) {
                var items = selected.selected;
                $(':hidden[name^=administratorRoleHasPermissions]').remove();
                $.each(items, function (key, value) {
                    if (value && value.attr.code != 0) {
                        $('#administratorRole-edit-form').prepend('<input type="hidden" class="am-input-sm" name="administratorRoleHasPermissions[' + key + '].administratorPermissionId" value="' + value.attr.code + '">');
                    }
                });
            }).on('deselected.tree.amui', function (event, selected) {
                var items = selected.selected;
                $(':hidden[name^=administratorRoleHasPermissions]').remove();
                $.each(items, function (key, value) {
                    if (value && value.attr.code != 0) {
                        $('#administratorRole-edit-form').prepend('<input type="hidden" class="am-input-sm" name="administratorRoleHasPermissions[' + key + '].administratorPermissionId" value="' + value.attr.code + '">');
                    }
                });
            });

            //选中
            var ids = [];
            <c:forEach items="${administratorRoleHasPermissions }" var="item" varStatus="st">
            ids.push(parseInt('${item.administratorPermissionId}'));
            </c:forEach>

            ids = ids.sort(function (value1, value2) {
                if (value1 < value2) {
                    return -1;
                } else if (value1 > value2) {
                    return 1;
                } else {
                    return 0;
                }
            });
            window.data = ids;
            $('#parentTree').tree('openFolder', $('#administratorPermission0'));
            $.each(ids, function (key, value) {
                $('#parentTree').tree('openFolder', $('#administratorPermission' + value));
                $('#parentTree').tree('selectItem', $('#administratorPermission' + value));
            });
        });
    </script>
</body>
</html>